/**
 * 博客配置 created to by doujiabao
 */

import React, { Component } from 'react'

import http from '@/service/fetch'

import styles from './index.module.styl'

import {
    Spin,
    Form,
    Input,
    Button,
    message,
} from 'antd'
import Breadcrumb from '@/components/Breadcrumb'

const { TextArea } = Input

const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 14,
    }
}

class Bconfig extends Component {

    state = {
        //config
        data: {},
        //加载状态
        loading: false,
    }

    componentDidMount() {
        this.fetchData()
    }

    fetchData = () => {
        this.setState({
            loading: true
        }, () => {
            http.blogConfig().then(res => {
                if (res.code === 200) {
                    this.setState({
                        loading: false,
                        data: res.data
                    })
                }
            }).catch(err => {
                this.setState({ loading: false })
            })
        })
    }

    onFinish = (values) => {
        http.blogConfigUpdate({
            ...values
        }).then(res => {
            message.success(res.data)
        }).catch(err => {
            console.log(err)
        })
    }

    handleBgChange = (e) => {
        this.setState({
            data: {
                ...this.state.data,
                bg: e.target.value
            }
        })
    }

    render() {
        const {
            data,
            loading,
        } = this.state

        return (loading && !data.bg ? < Spin /> :
            <React.Fragment>

                <Breadcrumb
                    pathSnippets={[
                        '博客管理',
                        '博客配置'
                    ]}
                    className={styles.breadcrumb}
                />

                <div className={styles.title}>设置</div>

                <Form
                    className={styles.form}
                    {...layout}
                    initialValues={data}
                    onFinish={this.onFinish}
                >
                    <Form.Item label="背景图">
                        <Form.Item name="bg">
                            <Input className={styles.iptVal} onChange={this.handleBgChange} placeholder="主图地址" />
                        </Form.Item>
                        <img className={styles.bg} src={data.bg} alt="背景图" />
                    </Form.Item>

                    <Form.Item name="title" label="标题">
                        <Input className={styles.iptVal} placeholder="标题" />
                    </Form.Item>

                    <Form.Item name="descs" label="介绍">
                        <Input className={styles.iptVal} placeholder="介绍" />
                    </Form.Item>

                    <Form.Item name="other" label="其它信息">
                        <TextArea className={styles.iptVal} placeholder="其它信息" autoSize={{ minRows: 4 }} />
                    </Form.Item>

                    <Button type="primary" htmlType="submit">{!!data.title ? '保存' : '修改'}</Button>
                </Form>

            </React.Fragment>)
    }

}

export default Bconfig